<template>
  <div class="app-container">
    <div class="header flex">
      <FormSearch :formFields="searchList" @search="Search" @reset="Search"></FormSearch>
    </div>
    <div class="footer">
      <a-table :columns="columns" :data-source="state.data" rowKey="user_id" :pagination="state.pagination"
        @change="pageChange" :loading="state.loading" :scroll="{ x: 1200 }">
        <template #bodyCell="{ record, column }">
          <template v-if="column.dataIndex === 'assets'">
            <div>余额：￥{{ record.balance || "-" }}</div>
          </template>
          <template v-if="column.dataIndex === 'invitation'">
            <div>邀请码：{{ record.info.invite_code || "-" }}</div>
            <div v-if="record.p_info.length !== 0">
              上级联系方式：{{ record.p_info.mobile }}
            </div>
          </template>
          <template v-if="column.dataIndex === 'status'">
            <a-switch v-model:checked="record.status" checked-children="启用" un-checked-children="禁用" :checkedValue="1"
              :unCheckedValue="2" @change="changeSwitch(record)" />
          </template>
          <template v-if="column.dataIndex === 'actions'">
            <a-space size="small">
              <a-button type="link" @click="handleDetail(record)">详情</a-button>
              <a-button type="link" @click="handleSet(record)">设置团长</a-button>
<!--              <a-button type="link" @click="handleBindUser(record)">绑定用户</a-button>-->
            </a-space>
          </template>
        </template>
      </a-table>
    </div>
    <DrawerDetails ref="detail" />
    <SettingTuan ref="setRef" @modal-success="refresh" />
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { list, open } from "@/api/user";
import { bindUser } from "@/api/contact";
import DrawerDetails from "./DrawerDetails.vue";
import SettingTuan from './components/SettingTuan.vue'
import { message } from "ant-design-vue";
import dayjs from "dayjs";


const detail = ref();
const setRef = ref()
const columns = [
  {
    title: "id",
    dataIndex: "user_id",
  },
  {
    title: "用户名",
    dataIndex: "nickname",
  },
  {
    title: "手机号",
    dataIndex: "mobile",
  },
  {
    title: "邀请概况",
    dataIndex: "invitation",
  },
  {
    title: "状态",
    dataIndex: "status",
  },
  {
    title: "注册时间",
    dataIndex: "create_time",
  },
  {
    title: "操作",
    dataIndex: "actions",
    fixed: "right",
  },
];
//搜索框数据
const searchList = reactive([
  {
    type: "input",
    label: "用户名",
    name: "nickname",
    value: "",
    placeholder: "请输入用户名",
  },
  {
    type: "input",
    label: "用户手机号",
    name: "mobile",
    value: "",
    placeholder: "请输入用户手机号",
  },
  {
    type: "input",
    label: "邀请码",
    name: "invite_code",
    value: "",
    placeholder: "请输入邀请码",
  },
  {
    type: "input",
    label: "上级邀请码",
    name: "p_invite_code",
    value: "",
    placeholder: "请输入上级邀请码",
  },
  {
    type: "input",
    label: "上级手机号",
    name: "p_mobile",
    value: "",
    placeholder: "请输入上级手机号",
  }, {
    type: "select",
    label: "是否团长",
    name: "tuan_status", //字段
    value: null,
    placeholder: "请选择",
    allowClear: true,
    options: [
      {
        id: 1,
        name: "团长",
      }, {
        id: 2,
        name: "不是团长",
      },
    ],
  },
  {
    type: "range-picker",
    label: "注册时间",
    name: "create_time",
    value: [],
    placeholder: "请选择",
    showTime: true,
  },
]);

const state = reactive({
  data: [], //表格的数据
  loading: false,
  pagination: {
    total: 0,
    showSizeChanger: true, //是否页码可以改变
    current: 1, //当前xx页面
    pageSize: 10, //一页展示xx条数据
    showTotal: function (total) {
      return "总共" + total + "条数据";
    }, //总共xx条
    showQuickJumper: true,
  }, //分页数据
  searchParams: {
    page: 1,
    limit: 10,
  }, //搜索数据
});
//分页变动数据
const pageChange = (pagination) => {
  state.pagination.current = pagination.current;
  state.pagination.pageSize = pagination.pageSize;
  //搜索的参数
  state.searchParams.page = pagination.current;
  state.searchParams.limit = pagination.pageSize;
  //搜索
  getList();
};

//获取列表的数据
const getList = () => {
  state.loading = true;
  list(state.searchParams).then(function (res) {
    setTimeout(function () {
      state.loading = false;
    }, 500);
    if (res.code == 0) {
      state.loading = false;
      const data = res.data;
      state.data = data.data;
      state.pagination.total = data.total;
    }
  });
};

//搜索事件
const Search = (values) => {
  state.searchParams.page = 1;
  state.searchParams = {
    ...state.searchParams,
    ...values,
    create_time:
      values.create_time.length > 0
        ? [
          dayjs(values.create_time[0]).format("YYYY-MM-DD HH:mm:ss"),
          dayjs(values.create_time[1]).format("YYYY-MM-DD HH:mm:ss"),
        ]
        : [],
  };
  //搜索
  getList();
};
// 开启或者禁用
const changeSwitch = (record) => {
  open({
    id: record.user_id,
  }).then((res) => {
    if (res.code == 0) {
      message.success(res.msg);
      getList();
    }
  });
};
const handleDetail = (record) => {
  detail.value.show(record);
};
// 设置团长
const handleSet = (record) => {
  setRef.value.show(record)
}
// 绑定用户
const handleBindUser = (record) => {
  // bindRef.value.show();
  bindUser({
    id: record.user_id
  }).then(res => {
    if (res.code == 0) {
      message.success(res.msg);
      refresh()
    }
  })
};
const refresh = () => {
  getList();
}
//获取列表
getList();
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  padding: 16px 16px 16px 16px;
  margin-bottom: 16px;
  border-radius: 4px;
  background: white;
  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
}

.footer {
  flex: 1;
  display: flex;
  padding: 16px;
  flex-direction: column;
  border-radius: 4px;
  overflow: hidden;
  background: white;
  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
  position: relative;
  box-sizing: border-box;

  .table-inner {
    flex: 1;
    position: relative;
  }
}
</style>
